<template>
  <div class="bar-line">
    <div class="chart" ref="chart"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
import { barLine } from './../../utils/echarts-option'
export default {
  name: 'barLine',
  props: {
    title: {
      type: Object,
      default: () => {
        return {}
      }
    },
    legend: {
      type: Object,
      default: () => {
        return {}
      }
    },
    xAxis: {
      type: Object,
      default: () => {
        return {}
      }
    },
    yAxis: {
      type: [Object, Array],
      default: () => {
        return [{}]
      }
    },
    tooltip: {
      type: Object,
      default: () => {
        return {}
      }
    },
    dataZoom: {
      type: Object,
      default: () => {
        return {}
      }
    },
    seriesData: {
      type: Array,
      default: () => {
        return []
      },
      required: true
    },
    axis: {
      type: Object
    },
    config: {
      type: Object
    },
    grid: {
      type: Object,
      default: () => {
        return {}
      }
    },
    tooltipsConfig: {
      type: Object
    },
    isCallback: {
      type: Boolean,
      default: false
    }
  },
  components: {
  },
  data () {
    return {
      chart: ''
    }
  },
  methods: {
    initChart () {
      if (this.seriesData.length === 0) {
        return false
      }
      if (this.chart === '') {
        this.chart = echarts.init(this.$refs.chart)
      } else {
        this.chart.clear()
        this.$refs.chart.removeChild(this.$refs.chart.lastElementChild)
      }
      if (this.chart.getHeight() <= 50 || this.chart.getWidth() <= 50) {
        this.resizeChart()
      }
      this.calculationSplitNumber()
      let chartOption = barLine({
        tooltipsConfig: this.tooltipsConfig,
        axis: this.axis,
        title: this.title,
        yAxis: this.yAxis,
        legend: this.legend,
        dataZoom: this.dataZoom,
        tooltip: this.tooltip,
        xAxis: this.xAxis,
        config: this.config,
        grid: this.grid,
        seriesData: this.seriesData
      })
      this.chart.setOption(chartOption)
    },
    resizeChart () {
      this.chart.resize()
    },
    // 计算分割线数量
    calculationSplitNumber () {
      if (this.$refs.chart.offsetHeight < 130) {
        if (this.yAxis instanceof Array) {
          this.yAxis.forEach(item => {
            item.splitNumber = 2
          })
        } else {
          this.yAxis.splitNumber = 2
        }
      }
    }
  },
  mounted () {
    // this.initChart()
  },
  watch: {
    seriesData: function (val) {
      this.initChart()
    }
  }
}
</script>

<style lang="scss" scoped="scoped">
  .bar-line{
    width: 100%;
    height: 100%;
    .chart{
      width: 100%;
      height: 100%;
    }
  }
</style>
